<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>天气预报</title>
    <!--<link rel="stylesheet" href="css/reset.css">-->
    <link rel="stylesheet" href="css/weather.css">
    <meta content="IE=dege,chrom=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
    <style type="text/css">
        .icon {
            /* 通过设置 font-size 来改变图标大小 */
            width: 6em; height: 6em;
            /* 图标和文字相邻时，垂直对齐 */
            vertical-align: -0.15em;
            /* 通过设置 color 来改变 SVG 的颜色/fill */
            fill: currentColor;
            /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
               normalize.css 中也包含这行 */
            overflow: hidden;
        }
        .icon-s {
            /* 通过设置 font-size 来改变图标大小 */
            width: 1.6em; height: 1.6em;
            /* 图标和文字相邻时，垂直对齐 */
            vertical-align: -0.15em;
            /* 通过设置 color 来改变 SVG 的颜色/fill */
            fill: currentColor;
            /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
               normalize.css 中也包含这行 */
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="app">
    <div style="margin-top: 10px">
        <input type="text"/><button v-on:click="changeCity">切换</button>
    </div>
    <div id="now">
        <div>{{basic.location}}</div>
        <div>{{update}}</div>
        <div>{{now.cond_txt}}</div>
        <div>
            <svg class="icon" aria-hidden="true">
                <!--<use v-bind:xlink:href="$options.filters.formatIcon(now.cond_code)"></use>-->
                <use :xlink:href="now.cond_code | formatIcon"></use>
            </svg>
        </div>
        <div>{{now.tmp | formatTemp}}</div>
        <div>{{now.wind_dir}}{{now.wind_sc}}级</div>
    </div>
    <div id="hourly">
        <div class="hour" v-for="(hour,index) in hourly" :style="{left:index*20+'%'}">
            <div style="color: #7e7e7f;font-weight: 100">{{hour.time | formatTime}}</div>
            <div>
                <svg class="icon icon-s" aria-hidden="true">
                    <!--<use v-bind:xlink:href="$options.filters.formatIcon(now.cond_code)"></use>-->
                    <use :xlink:href="hour.cond_code | formatIcon"></use>
                </svg>
            </div>
            <div style="font-weight: 200">{{hour.tmp | formatTemp}}</div>
        </div>
    </div>
    <div id="daily_forecast">
        <div v-for="daily in daily_forecast">
            <span>{{daily.date | formatDate}}</span>
            <span style="color: #7e7e7f;text-align: right">{{daily.tmp_min | formatTemp}}</span>
            <span style="text-align: left">{{daily.tmp_max | formatTemp}}</span>
            <span style="color: #7e7e7f;font-size: 0.8em;text-align: right">{{daily.cond_txt_d}}</span>
            <span>
                <svg class="icon icon-s" aria-hidden="true">
                    <use :xlink:href="daily.cond_code_d | formatIcon"></use>
                </svg>
            </span>
        </div>
    </div>
    <div id="lifestyle">
        <div v-for="life in lifestyle">
            <div>{{life.type | formatLifeStyle}}：{{life.brf}}</div>
            <div style="font-weight: 200;color: #5f5f60">{{life.txt}}</div>
        </div>
    </div>
</div>
<script src="js/lib/jquery-1.8.3.min.js"></script>
<script src="js/lib/vue.min.js"></script>
<script src="js/lib/vue-resource.js"></script>
<script src="js/lib/iconfont.js"></script>
<script src="js/weather.js"></script>
</body>
</html>